<template>
  <van-button
    v-if="isFollowed"
    :loading="loading"
    @click="doClick"
    class="follow-btn"
    round
    size="small"
  >
    已关注
  </van-button>
  <van-button
    v-else
    :loading="loading"
    @click="doClick"
    class="follow-btn"
    type="info"
    color="#3296fa"
    round
    size="small"
    icon="plus"
  >
    关注
  </van-button>
</template>

<script>
// 导入 api接口
import { addFollow, unFollow } from '@/api/article.js'

export default {
  name: '',
  // 配置 v-model 绑定的 属性名 和 事件名
  model: {
    prop: 'isFollowed',
    event: 'onFollow'
  },
  props: {
    // 关注状态 isFollowed
    isFollowed: {
      type: Boolean,
      default: false
    },
    // 被关注的 作者id
    autId: {
      type: [Number, String],
      required: true
    }
  },
  data() {
    return {
      loading: false
    }
  },
  methods: {
    // 1.点击按钮方法------------------------
    async doClick() {
      // 开启按钮 加载状态
      this.loading = true
      try {
        if (this.isFollowed) {
          // 取消关注操作
          await unFollow(this.autId)
        } else {
          // 添加关注操作
          await addFollow(this.autId)
        }
        this.$toast.success('操作成功~: )')
        // 修改 父组件 上 关注状态
        this.$emit('onFollow', !this.isFollowed)
        // this.$emit('input', !this.isFollowed)
      } catch (err) {
        this.$toast.fail('操作失败~: {')
      }

      // 关闭按钮 加载状态
      this.loading = false
    }
  },
  created() {},
  computed: {},
  watch: {},
  components: {}
}
</script>

<style lang="less" scoped>
</style>
